<template>
    <div align="center">
        <div>
            <h4>1903A电商系统</h4>
        </div>
        <el-form :model="LoginData" status-icon ref="LoginData" :rules="rules" style="width: 30%;">
            <el-form-item label="登录名" prop="account">
                <el-input type="text" v-model="LoginData.account"></el-input>
            </el-form-item>
            <el-form-item label="登录密码" prop="password">
                <el-input type="text" v-model="LoginData.password"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="success" @click="Onsubmit()">登录</el-button>
            </el-form-item>
        </el-form>
    </div>


</template>
<script>
    export default {
        data() {
            
            //ref 代表的是获取form下所有的dom 文本框，下拉框等等
            //rules 验证，对应的:rules="rules"
            //value 你输入的值
            //回调函数
            var checkUserName = (rules, value, callback) => {
                if (value === '' || value == undefined) {
                    //当出现问题时 创建一个el自带的error并输出错误信息再回调
                    callback(new Error('请输入用户名'));
                } else {
                    if (this.LoginData.UserName !== '') {
                      
                        this.$refs.LoginData.validateField('UserName');
                    }
                    callback();
                }
            };
            var checkPwd = (rules, value, callback) => {
                if (value == "" || value == undefined) {
                    callback(new Error("请输入密码"));
                }
                else{
                    if(this.LoginData.pwd!="")
                    {
                        this.$refs.LoginData.validateField("pwd");
                    }
                }


            }
            return {
                LoginData: {
                    account: "",
                    password: ""
                },
                account:"",
                password:"",
                //这里是验证的调用
                rules: {
                    UserName: [{
                        validator: checkUserName, trigger: "blur"


                    }],
                    pwd:[{
                        validator:checkPwd,trigger:"blur"
                    }]
                }
            }
        },
        methods: {
            Onsubmit(){
                this.$axios.post("https://localhost:44396/api/service/user/login",account=this.LoginData.account,password=this.LoginData.password).then(s=>{
                    if(s.data>0){
                        alert("登录成功");

                    }

                })
            }
            }


        }
    
</script>